<template>
  <el-dialog :modelValue="visiable" title="导线与引绳" width="800" @closed="emit('closed')">
    <!-- search -->
    <div class="mb-2 flex justify-between items-center">
      <div>
        <el-input
          v-model="search"
          placeholder="请输入导线或引绳名称"
          style="width: 240px"
          clearable
          class="mr-2"
          @input="searchChange" />
        <el-select
          v-model="searchStyle"
          placeholder="请选择型号"
          clearable
          style="width: 180px"
          class="mr-2"
          @change="searchChange">
          <el-option v-for="item in styleOptions" :key="item.value" :label="item.value" :value="item.value" />
        </el-select>
      </div>

      <!-- 更新 -->
      <el-button type="primary" @click="searchChange">更新</el-button>
    </div>
    <!-- table -->
    <el-table :data="wires?.data" border stripe>
      <!-- id -->
      <el-table-column type="index" label="序号" width="60" align="center" />
      <!-- 名称 -->
      <el-table-column prop="wireName" label="名称" width="100"> </el-table-column>
      <!-- 型号 -->
      <el-table-column prop="wireStyle" label="型号">
        <template #default="scope">
          <div class="flex items-center gap-2">
            <Reel theme="outline" size="15" fill="#34495e" />
            <span>{{ scope.row.wireStyle }}</span>
          </div>
        </template>
      </el-table-column>
      <!-- 自重比载 -->
      <el-table-column label="自重比载" align="center" width="150">
        <template #default="scope">
          <div class="flex justify-center items-center gap-2">
            <el-tag type="success">{{ scope.row.wireWeight }} </el-tag>
            <span class="text-xs">kg/m</span>
          </div>
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" min-width="50" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)">
            <FileEditingOne theme="outline" size="16" fill="#2c3e50" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <DialogSettingEdit :visiable="showEdit" :selectWire="selectWire" @closed="showEdit = false" />
</template>

<script lang="ts" setup>
import DialogSettingEdit from './DialogSettingEdit.vue'
import useWire from '@/composables/useWire'
import { wireModel } from '@/types/model'
import { FileEditingOne, Reel } from '@icon-park/vue-next'
import { ref } from 'vue'

const search = ref('')
const searchStyle = ref('')
const selectWire = ref<wireModel>()
const styleOptions = ref()
const showEdit = ref(false)
const { visiable, sectionId } = defineProps(['visiable', 'sectionId'])
const emit = defineEmits(['closed'])

const { all: allWire, wires } = useWire()
const searchChange = () => {
  allWire({ sectionId, search: search.value, searchStyle: searchStyle.value || '' })
}

const edit = (wire: wireModel) => {
  showEdit.value = true
  selectWire.value = wire
}
const init = async () => {
  await allWire({ sectionId })

  const set = new Set()
  wires.value?.data.forEach((wire) => {
    set.add(wire.wireStyle)
  })
  styleOptions.value = Array.from(set).map((item) => ({ value: item }))
}

init()
</script>
